<template>
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in wordsList" :key="item.id">
      <h3 class="medium">{{ item.title }}</h3>
      <div class="dynasty">{{item.dynasty}} {{ item.author}}</div>
      <div v-if="item.content !== ''">
        <p class="shi">{{item.contentOne}}</p>
        <p class="shi">{{item.contentSecond}}</p>
        <p class="shi">{{item.contentThird}}</p>
        <p class="shi">{{item.contentFourth}}</p>
      </div>
      <p class="ci" v-else>{{item.previousSection}}</p>
      <p class="ci" v-else>{{item.theSecondPart}}</p>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data(){
    return{
      wordsList: [
        {
          id: "1",
          title: "蝶恋花",
          dynasty: "[宋]",
          author: "柳永",
          content: "",
          previousSection: "伫倚危楼风细细。望极春愁，黯黯生天际。草色烟光残照里。无言谁会凭阑意。",
          theSecondPart: "拟把疏狂图一醉。对酒当歌，强乐还无味。衣带渐宽终不悔。为伊消得人憔悴。",
        },
        {
          id: "2",
          title: "青玉案·元夕",
          dynasty: "[宋]",
          author: "辛弃疾",
          content: "",
          previousSection: "东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。",
          theSecondPart: "蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。",
        },
        {
          id: "3",
          title: "金缕衣",
          dynasty: "[唐]",
          author: "杜秋娘",
          contentOne: "劝君莫惜金缕衣，",
          contentSecond: "劝君须惜少年时。",
          contentThird: "有花堪折直须折，",
          contentFourth: "莫待无花空折枝。",
          previousSection: "",
          theSecondPart: "",
        },
      ],
    }
  },
  methods:{
    getPageData(pageIndex){
      const startIndex = (pageIndex - 1) * 5;
      const endIndex = pageIndex * 5;
      return this.swiper_data.slice(startIndex, endIndex);
    }
  }
}
</script>

<style scoped>
.medium{
  text-align: center;
  margin: 10px;
}
.dynasty{
  margin-left: 60%;
}
.ci{
  text-indent: 5rem
}
.shi{
  text-indent: 45%
}
.el-carousel__item:nth-child(2n) {
  background-color: #ce9339;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #cd9c67;
}
</style>

